<template>
  <Container class="member-list">
    <div class="container-header group" slot="header">
      <Input class="start" v-model="list.form.keyword" placeholder="经销商名称" @on-enter="onSearchBtnClick"/>
      <Select v-model="list.form.status" class="w150" clearable @on-change="onSearchBtnClick" placeholder="结算状态">
        <Option
          v-for="item in list.options.status"
          :value="item.value"
          :key="item.value">{{item.label}}</Option>
      </Select>
      <DatePicker placement="bottom-start" v-model="list.form.date" type="month" placeholder="选择月份"></DatePicker>
      <Button type="primary" icon="ios-search" class="btn-search" @click="onSearchBtnClick"></Button>
    </div>
    <Tabs>
      <div class="item" slot="extra">
        小计：共<span class="font-red">{{total}}</span>条记录，未结算<span class="font-red">{{noSettleQuantity}}</span>条、已结算<span class="font-red">{{settledQuantity}}</span>条、优惠券抵扣总金额¥<span class="font-red">{{discountTotalAmount}}</span>、向经销商支付¥<span class="font-red">{{settlementTotalAmount}}</span>
      </div>
      <export-btn @onExport="onExport" class="item" slot="extra"></export-btn>
      <TabPane label="特价轮胎扫码优惠券结算">
        <Table
          :height="options.tableHeight"
          stripe
          :columns="list.columns"
          :data="list.data"
          no-data-text="亲，没有找到相关记录哦！~"></Table>
        <div class="pager">
          <Page
            :total="list.totalItem"
            :current="list.currentPage"
            :page-size="list.pageSize"
            @on-change="onPageChange"
            @on-page-size-change="onPageSizeChange"
            show-sizer
            placement="top"></Page>
        </div>
        <Loader :status="list.status" @refresh="getData"></Loader>
      </TabPane>
    </Tabs>
    <BalanceSure ref="balanceSure" @complete="getData"></BalanceSure>
    <BalanceDetail ref="balanceDetail" @complete="getData"></BalanceDetail>
  </Container>
</template>
<script>
import { clearEmpty, formatMonth } from '@/util'
import table from '@/table'
import BalanceListData from './list/BalanceListData'
import BalanceSure from './list/BalanceSure'
import BalanceDetail from './list/BalanceDetail'
export default {
  name: 'sales/balance/list',
  components: {
    BalanceSure,
    BalanceDetail
  },
  data() {
    return {
      list: BalanceListData,
      options: {
        tableHeight: 300
      },
      total: null,
      noSettleQuantity: null,
      settledQuantity: null,
      discountTotalAmount: null,
      settlementTotalAmount: null,
      discountTotalAmount: null,
      month: null
    }
  },
  mounted() {
    this.initTable()
    this.list.currentPage = ~~this.$route.query.currentPage || 1
    this.list.pageSize = ~~this.$route.query.pageSize || this.list.pageSize
    this.getData()
    this.getPageSummary()
    this.$bus.$on('onDetail', ({ item }) => this.onDetail(item))
    this.$bus.$on('onBalance', ({ item }) => this.onBalance(item))
  },
  destroyed() {
    this.$bus.$off()
  },
  methods: {
    ...table,
    onSearchBtnClick() {
      this.list.currentPage = 1
      this.getData()
      this.getPageSummary()
    },
    getData() {
      this.list.status = 'loading'
      let param = {
        current: this.list.currentPage,
        size: this.list.pageSize,
        distributorName: this.list.form.keyword,
        settlementStatus: this.list.form.status,
        settleMonth: this.list.form.date ? formatMonth(this.list.form.date).replace('-', '') : ''
      }
      param = clearEmpty(param)
      this.$jsonPost('/coupon/coupon_settlement/page', param).then(data => {
        this.list.data = (data.records || []).map(item => {
          return {
            id: item.id,
            distributorId: item.distributorId,
            distributorName: item.distributorName,
            departmentName: item.departmentName,
            storeNum: item.storeNum,
            settleMonth: item.settleMonth,
            couponAmount: item.couponAmount,
            settlementStatus: item.settlementStatus,
            settlementAmount: item.settlementAmount,
            remark: item.remark,
            ccsPlusCouponAmount: item.ccsPlusCouponAmount?item.ccsPlusCouponAmount:0
          }
        })
        this.total = data.total ? data.total : '0'
        this.list.totalItem = Number(data.total)
        this.backTableTop()
        this.list.status = 'pass'
      }).catch(() => {
        this.list.status = 'error'
      })
    },
    getPageSummary() {
      this.list.status = 'loading'
      let param = {
        current: this.list.currentPage,
        size: this.list.pageSize,
        distributorName: this.list.form.keyword,
        settlementStatus: this.list.form.status,
        settleMonth: this.list.form.date ? formatMonth(this.list.form.date).replace('-', '') : ''
      }
      param = clearEmpty(param)
      this.$jsonPost('/coupon/coupon_settlement/page_summary', param).then(data => {
        this.noSettleQuantity = data.noSettleQuantity ? data.noSettleQuantity : '0'
        this.settledQuantity = data.settledQuantity ? data.settledQuantity : '0'
        this.discountTotalAmount = data.discountTotalAmount ? data.discountTotalAmount : '0'
        this.settlementTotalAmount = data.settlementTotalAmount ? data.settlementTotalAmount : '0'
        this.backTableTop()
        this.list.status = 'pass'
      }).catch(() => {
        this.list.status = 'error'
      })
    },
    onExport() {
      let param = {
        current: this.list.currentPage,
        size: this.list.pageSize,
        distributorName: this.list.form.keyword,
        settlementStatus: this.list.form.status,
        settleMonth: this.list.form.date ? formatMonth(this.list.form.date).replace('-', '') : ''
      }
      this.$ajaxPost('/coupon/coupon_settlement/settlement_export', param).then(() => {})
      this.$Modal.confirm({
        title: '提示',
        content: '跳转到导出列表页面？',
        onOk: () => {
          this.$router.push('/home/export/list')
        }
      })
    },
    onPageChange(number) {
      this.list.currentPage = number
      this.$router.push({
        name: 'sales/balance/list',
        query: {
          currentPage: this.list.currentPage,
          pageSize: this.list.pageSize
        }
      })
      this.getData()
    },
    onPageSizeChange(pageSize) {
      this.list.currentPage = 1
      this.list.pageSize = pageSize
      this.$router.push({
        name: 'sales/balance/list',
        query: {
          currentPage: this.list.currentPage,
          pageSize: this.list.pageSize
        }
      })
      this.getData()
    },
    onDetail(item) {
      this.$refs.balanceDetail.updateForm(item)
    },
    onBalance(item) {
      this.$refs.balanceSure.updateForm(item)
    }
  }
}
</script>